<template>
    <div class="container">
        <h1>评论管理-vuex版</h1>
        <hr>
        <!-- 发布评论 -->
        <div class="list-group">
             <!-- 发布评论 -->
            <cmt-post
                @addComment="addComment"
            ></cmt-post>
            <!-- 评论单项 -->
            <cmt-item
                v-for="(item) in this.$store.state.comments"
                :key="item.id"
                :item="item"
                @delComment="delComment"
            ></cmt-item>
        </div>
    </div>
</template>
<script>
import CmtPost from "./CmtPost";
import CmtItem from "./CmtItem";
export default {
    components:{
        CmtPost,
        CmtItem
    },
    data() {
        return {

        }
    },
    methods:{
        // 自定义事件处理函数
        delComment(id){
            // this.comments=this.comments.filter(item=>id!=item.id);
            // 调用store对象的删除方法
            this.$store.commit('delComment',id)
        },
        //  发布评论
        addComment(comment){
            // this.comments.unshift(comment);
            // 调用vuex提供的添加方法
            this.$store.commit('addComment',comment)

        }
    }
};
</script>
<style scoped lang="css">
</style>